<template>
    <div class="ArticleTabs card-box">
        <i class="box-title-icon fontColor iconfont icon-icon_bangzhuwendang"></i>
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="showTemplate">
            <template v-for="(item,index) in config" >
                 <el-tab-pane :name="String(index)" :key="item.id">
                    <el-badge slot="label" :value="config[index].noReadCount" class="badge-todo-item" :hidden="config[index].hidden">
                        <span>{{config[index].name}}</span>
                    </el-badge>
                    <ArticleTemplate :newsList="newsList" :name="config[index].name"></ArticleTemplate>
                </el-tab-pane>
            </template>
           
            
        </el-tabs>
        <el-button class="btn-more" type="text">
            <a href="#" title="" @click="handleTodoMore" class="fontColor">MORE</a>
        </el-button>
    </div>
</template>

<script>
import bus from '../../common/bus';
import ArticleTemplate from './ArticleTemplate';
import { ArticleTabs } from './data/Content.js';
import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const { mapState:tagState,  } = createNamespacedHelpers('tagModule');
export default {
    name: 'ArticleTabs',
    data () {
        return {
            activeName: '0',
            ArticleTabs:ArticleTabs,
            newsList:[],
            config:[{
                'name':'业务通知',
                'typeId':'30017',
                'categoryId':'3367371453390557186',
                'noReadCount':'0',
                'hidden':true,
                'index':0
            }],
            showTemplate:false
        };
    },
    components:{
        ArticleTemplate
    },
    computed: {
        ...tagState({
            activeTag:state => state.activeTag,
        }),
    },
    watch:{
        activeTag(){
            if(this.activeTag.url==='index'){
                this.getList(this.config[this.activeName]); // 征求意见
            }
        }
    },
    created(){
        this.getInit(0);
    },
    methods: {
        // 切换tab 标签
        handleClick(tab) {
            this.getList(this.config[tab.index]);
        },
        // 更多
        handleTodoMore(){
            //根据所在的标签的不同，more的链接不同
            let menu = {
                // url:window.location.href.split('#')[0]+'#/ArticleMorePower?categoryId='+this.config[this.activeName].categoryId+'&typeId='+this.config[this.activeName].typeId+'&name='+this.config[this.activeName].name,
                url:window.location.href.split('#')[0]+'#/More?categoryId='+this.config[this.activeName].categoryId,
                name:this.config[this.activeName].name,
                refreshOnFocus:true,
                isNew:false // 是否在新页面打开
            }; 
            bus.$emit('openMenu',menu);
        },
        // 获取数据
        getInit(tab){
            this.$axios.get(ArticleTabs.contentUrl).then((res) => {
                this.getList(res.data[tab]);
                this.config = res.data;
                this.showTemplate = true;
                // this.getNoReadCount();
            });
        },
        // 获取列表数据
        getList(param){
            let data = {
                // typeId:param.typeId,
                categoryId:param.categoryId ? param.categoryId : '',
                userId:appUtil.getSes('userId'),
                deptCodes:appUtil.getLocal('orgCode'),
                roleIds:appUtil.getSes('roleIds'),
                status:'1',
                ps:10,
                pn:1,
                frontId:'1' //需要通过失效时间过滤
            };
            this.$axios.get('/ptp-cms/cmscontent/getContentByUserIdDeptCode',{params:data})
                .then(res => {
                    if(res.data.code === -1){
                        return;
                    }
                    this.newsList = res.data.data.dataList;
                    this.getNoReadCount();
                    // if(res.data.data.dataList.length>0){
                    //     this.config[param.index].noReadCount = res.data.data.dataList[0].noReadCount;
                    //     this.config[param.index].hidden = res.data.data.dataList[0].noReadCount==='0'?true:false;
                    // }
                    
                });
        },
        // 未读数量
        getNoReadCount(){
            let categoryIds = [];
            for(let i=0;i<this.config.length;i++){
                categoryIds.push(this.config[i].categoryId);
            }
            let data = {
                categoryIds:categoryIds.join(','),
                userId:appUtil.getSes('userId'),
                deptCodes:appUtil.getLocal('orgCode'),
                roleIds:appUtil.getSes('roleIds'),
                status:'1',
                ps:10,
                pn:1,
                frontId:'1' //需要通过失效时间过滤
            };
            this.$axios.get('/ptp-cms/cmscontent/getNoReadCount',{params:data})
                .then(res => {
                    this.getCount(res.data);
                });
        },
        // 处理未读数量
        getCount(data){
            for(let i=0;i<data.length;i++){
                this.config[i].noReadCount = data[i].noReadCount;
                this.config[i].hidden = data[i].noReadCount==='0'?true:false;
            }
            this.$forceUpdate();
        }
    },
};
</script>

<style lang="scss" scoped>

</style>
